<template>
    <div class="container">
        <el-page-header @back="goBack" content="驿站列表"></el-page-header>

        <el-row type="flex" justify="space-between" class="nav-bar">
            <el-col :span="3" class="buttonList">
                <el-button type="primary" @click="create">新建</el-button>
            </el-col>
            <el-col class="text-right">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="关键字">
                        <el-input placeholder="请输入" v-model="key" prefix-icon="el-icon-search"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-divider></el-divider>
        <!-- <el-row type="flex" justify="space-between" class="nav-bar e-m-b-20">
			<el-col :span="3">
				<el-button type="primary" @click="create" icon="el-icon-plus" size="small">新增</el-button>
			</el-col>
			<el-col class="text-right">
				<el-button type="primary" plain icon="el-icon-upload2" size="small">导入</el-button>
				<el-button plain icon="el-icon-download" size="small">下载</el-button>
			</el-col>
		</el-row> -->
        <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column fixed type="index" width="50">
            </el-table-column>
            <el-table-column fixed prop="name" label="驿站名称">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="150">
            </el-table-column>
            <el-table-column prop="lastlogindatetime" label="注册时间" width="180">
            </el-table-column>
            <el-table-column prop="state" label="账号状态" width="180">
                <template slot-scope="scope">
                    <span class="color-success" v-if="scope.row.usestate == '已启用'">{{scope.row.usestate}}</span>
                    <span class="color-warning" v-else>{{scope.row.usestate}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="table-pagination">
            <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
        <el-dialog :title="dialogType == 'add' ? '新建驿站' : '编辑驿站'" :visible.sync="dialogVisible" width="800px">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="驿站名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="所属城市">
                    <el-cascader separator="-" @change="SelectCity" filterable :props="{
                        lazy: true,
                        checkStrictly: true,
                        lazyLoad: loadCity,
                        label: 'name',
                        value: 'id'
                    }" style="width: 100%;margin-right: 20px" v-model="form.cityid"></el-cascader>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address" placeholder="请输入地址(街道、楼牌等)" prefix-icon="el-icon-location-information">
                        <el-button slot="append" icon="el-icon-search" @click="geoCode" :loading="loading">搜索</el-button>
                    </el-input>
                    <div id="container" class="e-m-t-10" style="width:100%;height: 300px;"></div>
                </el-form-item>
                <el-form-item label="联系号码">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <!-- <el-form-item label="性别">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证">
                    <cropper-upload :zoomScale='[1, 1]' :isCropper="true" @getUpload="handleFilesSuccess"
                        class="avatar-uploader">
                        <img v-if="form.identitycard" :src="fileURL + form.identitycard" class="avatar">
                        <div class="avatar-uploader-icon" v-else>
                            <div><i class="el-icon-plus"></i></div>
                            <div class="e-font-14">上传图片</div>
                        </div>
                    </cropper-upload>
                    <div class="tips e-p-t-10">建议上传尺寸比例为200*200 </div>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitType">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
var map = {}
// var geocoder = {}
// var marker = {}
export default {
    layout: 'admin',
    head() {
        return {
            title: '驿站列表-' + this.websetting.name
        }
    },
    data() {
        return {
            loading: true,
            key: '',
            page: 1,
            pageSize: 10,
            total: 0,
            dialogVisible: false,
            dialogType: 'add',
            form: {
                cityid: 0,
                address: "",
                name: "",
                // sex: 1,
                mobile: "",
                // identitycard: ""
            },
            tableData: []
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        SelectCity(v) { //选择城市
		    this.form.cityid = v[v.length - 1];
		},
		loadCity(node, resolve) { //加载城市
		    if (node.level == 0) {
		        this.$axios.post('/city/List',{
		            pageIndex: 1,
		            pageSize: 9999,
		            pId: 0
		        }).then((res) => {
		            node = res.rows.map(function(c) {
		                return {
		                    id: c.id,
		                    name: c.name
		                }
		            });
		            resolve(node);
		        })
		    } else {
				if(node.level < 4){
					this.$axios.post('/city/List',{
						pageIndex: 1,
						pageSize: 9999,
						pId: node.value
					}).then((res) => {
						node = res.rows.map(function(c) {
							return {
								id: c.id,
								name: c.name
							}
						});
						resolve(node);
					})
				}else{
					resolve();
				}
		    }
		},
        submitType() {
            let api = ''
            if (this.dialogType == 'add') {
                api = '/Admin/Store/Account/create'
            }
            if (this.dialogType == 'edit') {
                api = '/Admin/Store/Account/edit'
            }
            this.loading = true
            this.$axios.post(api, this.form).then((res) => {
                this.$message.success(res.msg);
                this.dialogVisible = false;
                this.getList()
            })
        },
        handleFilesSuccess(res, file) {
            if (file.status === "success") {
                this.loading = false
                this.form.identitycard = res.path
            }
        },
        create() {
            this.dialogVisible = true
            setTimeout(()=>{
                map = new AMap.Map("container", {
                    resizeEnable: true
                });
            },500)
        },
        geoCode(){  //地理编码，根据地址获取经纬度坐标
            var address = this.form.address;
            var geocoder = new AMap.Geocoder({
                // city: "010", //城市设为北京，默认：“全国”
            });
            var marker = new AMap.Marker();
            this.loading = true
            geocoder.getLocation(address, (status, result)=> {
                if (status === 'complete'&&result.geocodes.length) {
                    var lnglat = result.geocodes[0].location
                    // document.getElementById('lnglat').value = lnglat;
                    console.log('lnglat:',lnglat)
                    marker.setPosition(lnglat);
                    map.add(marker);
                    map.setFitView(marker);
                    this.loading = false
                }else{
                    this.$message.error('根据地址查询位置失败')
                    this.loading = false
                }
            });
        },
        goBack() {
            this.$router.go(-1)
        },
        getList() {
            // this.tableData = []
            // this.loading = true
            // setTimeout(() => {
                // this.loading = false
                // this.tableData = [
                // {
                // 	id:1,
                // 	face: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
                // 	name: '蓝银',
                // 	sex: 0,
                // 	tel: '13800138000',
                // 	regtime: '2022-10-07 16:36',
                // 	recoverytime: '2022-10-07 17:35',
                // 	typeuser:'散户',
                // 	type: '一级会员',
                // 	area: '清远市清城区洲心街道',
                // 	number: '464'
                // },
                // {
                // 	id:2,
                // 	face: '/images/avatar/avatar1.jpg',
                // 	name: '张小翠',
                // 	sex: 1,
                // 	tel: '13800138000',
                // 	regtime: '2022-10-07 16:36',
                // 	recoverytime: '2022-10-07 17:35',
                // 	typeuser:'商户',
                // 	type: '二级会员',
                // 	area: '清远市清城区洲心街道',
                // 	number: '464'
                // },
                // {
                // 	id:2,
                // 	face: '/images/avatar/avatar2.jpg',
                // 	name: '杨莹',
                // 	sex: 1,
                // 	tel: '13800138000',
                // 	regtime: '2022-10-07 16:36',
                // 	recoverytime: '2022-10-07 17:35',
                // 	typeuser:'写字楼',
                // 	type: '二级会员',
                // 	area: '清远市清城区洲心街道',
                // 	number: '464'
                // },
                // {
                // 	id:2,
                // 	face: '/images/avatar/avatar3.jpg',
                // 	name: '杨莹',
                // 	sex: 1,
                // 	tel: '13800138000',
                // 	regtime: '2022-10-07 16:36',
                // 	recoverytime: '2022-10-07 17:35',
                // 	typeuser:'散户',
                // 	type: '一级会员',
                // 	area: '清远市清城区洲心街道',
                // 	number: '464'
                // },
                // {
                // 	id:2,
                // 	face: '/images/avatar/man_avatar1.jpg',
                // 	name: '曹操',
                // 	sex: 0,
                // 	tel: '13800138000',
                // 	regtime: '2022-10-07 16:36',
                // 	recoverytime: '2022-10-07 17:35',
                // 	typeuser:'散户',
                // 	type: '二级会员',
                // 	area: '清远市清城区洲心街道',
                // 	number: '464'
                // },
                // {
                // 	id:2,
                // 	face: '/images/avatar/man_avatar2.jpg',
                // 	name: '王五',
                // 	sex: 0,
                // 	tel: '13800138000',
                // 	regtime: '2022-10-07 16:36',
                // 	recoverytime: '2022-10-07 17:35',
                // 	typeuser:'散户',
                // 	type: '二级会员',
                // 	area: '清远市清城区洲心街道',
                // 	number: '464'
                // },
                // {
                // 	id:2,
                // 	face: '/images/avatar/man_avatar3.jpg',
                // 	name: '赵六',
                // 	sex: 0,
                // 	tel: '13800138000',
                // 	regtime: '2022-10-07 16:36',
                // 	recoverytime: '2022-10-07 17:35',
                // 	typeuser:'散户',
                // 	type: '三级会员',
                // 	area: '清远市清城区洲心街道',
                // 	number: '464'
                // },
                // {
                // 	id:2,
                // 	face: '/images/avatar/avatar3.jpg',
                // 	name: '刘清',
                // 	sex: 1,
                // 	tel: '13800138000',
                // 	regtime: '2022-10-07 16:36',
                // 	recoverytime: '2022-10-07 17:35',
                // 	typeuser:'散户',
                // 	type: '二级会员',
                // 	area: '清远市清城区洲心街道',
                // 	number: '464'
                // }
                // ]
            // }, 1000)
            this.$axios.post('/Admin/Store/Account/List', {
                "PageIndex": this.page,
                "PageSize": this.pageSize,
                "Key": this.key
            }).then((res) => {
                console.log(res)
                this.loading = false
                this.tableData = res.rows;
                this.total = res.total;
            }).catch(()=>{
                this.loading = false
            })
        },
        edit(item) {
            this.form = item
            this.dialogType = 'edit'
            this.dialogVisible = true
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        del(id) {
            return new Promise((resolve, reject) => {
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.$axios.post('/newsDetail/delete?Ids=' + id).then((res) => {
                    //     this.$message.success(res.msg);
                    //     this.getList()
                    //     resolve()
                    // })
                })
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.nav-bar {
    padding: 20px 0 0;
}

.send {
    margin-top: 15px;
    margin-right: 10px;
}

.dialogForm {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
        width: 50%;
        float: left;

        &.all {
            width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }
}

.user-face {
    display: flex;
    align-items: center;
    position: relative;

    .male,
    .female {
        font-size: 14px;
        position: absolute;
        left: 30px;
        top: 0;
        background-color: #fff;
        height: 16px;
        width: 16px;
        line-height: 16px;
        border-radius: 6px;
    }

    .male {
        color: var(--blue);
    }

    .female {
        color: var(--pink);
    }
}
</style>
